<script setup lang="ts">
import { ref } from "vue";
import type Typings from "@/typings";

const visible = ref<boolean>(false);
const selectItem = ref<Typings.Local.CreateForm.formJsons>();
const selectIndex = ref<number>(-1);

const open = (item: Typings.Local.CreateForm.formJsons, index: number) => {
  selectItem.value = item;
  selectIndex.value = index;
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

const handleDeleteOption = (scope: { $index: number }) => {
  selectItem.value?.options?.splice(scope.$index, 1);
};

const handleAddOption = () => {
  selectItem.value?.options?.push({ name: "", code: "" });
};

defineExpose({
  open,
});
</script>

<template>
  <xt-drawer v-model="visible" title="属性设置" :before-close="close">
    <xt-form v-if="selectItem" label-width="96">
      <div>
        <h1 class="font-bold mb-[12px]">基础属性设置:</h1>
        <xt-row :gutter="12">
          <xt-col :span="12">
            <xt-form-item label="栅格">
              <!-- <xt-input v-model="selectItem.span"></xt-input> -->
              <xt-radio
                v-model="selectItem.span"
                :options="[
                  { name: '8', code: 8 },
                  { name: '12', code: 12 },
                  { name: '16', code: 16 },
                  { name: '20', code: 20 },
                  { name: '24', code: 24 },
                ]"
              ></xt-radio>
            </xt-form-item>
          </xt-col>

          <xt-col :span="12">
            <xt-form-item label="占位符">
              <xt-input v-model="selectItem.placeholder"></xt-input>
            </xt-form-item>
          </xt-col>

          <xt-col :span="12">
            <xt-form-item label="prop">
              <xt-input v-model="selectItem.prop"></xt-input>
            </xt-form-item>
          </xt-col>

          <xt-col :span="12">
            <xt-form-item label="label">
              <xt-input v-model="selectItem.label"></xt-input>
            </xt-form-item>
          </xt-col>

          <xt-col :span="12">
            <xt-form-item label="默认值">
              <xt-input v-model="selectItem.defaultValue"></xt-input>
            </xt-form-item>
          </xt-col>

          <xt-col :span="12">
            <xt-form-item label="是否置灰">
              <xt-radio
                v-model="selectItem.disabled"
                :options="[
                  { name: '是', code: true },
                  { name: '否', code: false },
                ]"
              ></xt-radio>
            </xt-form-item>
          </xt-col>
        </xt-row>
      </div>

      <div v-if="selectItem.options">
        <h1 class="font-bold mb-[12px]">options 设置:</h1>
        <div class="flex flex-row-reverse">
          <xt-link type="success" @click="handleAddOption">添加</xt-link>
        </div>
        <xt-table :data="selectItem.options || []">
          <xt-table-column type="index" label="序号" width="60">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </xt-table-column>
          <xt-table-column label="名称" prop="name">
            <template #default="scope">
              <xt-input v-model="scope.row.name" placeholder="请输入" />
            </template>
          </xt-table-column>
          <xt-table-column label="值" prop="code">
            <template #default="scope">
              <xt-input v-model="scope.row.code" placeholder="请输入" />
            </template>
          </xt-table-column>
          <xt-table-column label="操作">
            <template #default="scope">
              <xt-link type="danger" @click="handleDeleteOption(scope)"
                >删除</xt-link
              >
            </template>
          </xt-table-column>
        </xt-table>
      </div>
    </xt-form>
  </xt-drawer>
</template>
